<template>
	<view @click="person(people.id)" class="recruit">
		<view class="title">
			<view v-if="people.top" class="top">置顶</view>
			<view class="concent">{{people.title}}</view>
			<view v-if="people.top" class="btn-top" @click.stop="top(people.id)">我要置顶</view>
		</view>
		<view class="project">
			<view class="via">
				<image src="../static/首页ok_29-17.jpg"></image>
			</view>
			<view class="message">
				<view class="personage-message">
					<view class="name">{{people.name | judgeName}}</view>
					<view class="btn-message">
						<image class="btn-image" src="../static/首页ok_29-17.jpg"></image>
						<view class="status">正在招</view>
					</view>
				</view>
				<view class="concent">
					{{people.concent}}
				</view>
			</view>
		</view>
		<view class="address">
			<view class="address-concent">
				<view class="address-image">
					<image src="../static/address.jpg"></image>
				</view>
				<view class="concent">{{people.address}}</view>
			</view>
			<view class="date">
				{{people.time}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recruits",
		data() {
			return {
				temp:true
			};
		},
		props: {
			people: {
				type: Object,
				default: () => {}
			}
		},
		methods:{
			top(id){
				this.people.top = false
			},
			person(id) {
				uni.navigateTo({
					url: "/pages/employment/person?id=" + id
				})
			},
		},
		filters: {
			judgeName(name) {
				return name ? name : "先生"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruit {
		padding: 20rpx 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		overflow: hidden;
		.title {
			display: flex;
			justify-content: space-between;
			position: relative;
			border-bottom: solid 1px #C0C0C0;
			padding-bottom: 14rpx;
			padding-left: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
			
			.top {
				width: 140rpx;
				position: absolute;
				top: -6rpx;
				left: -52rpx;
				text-align: center;
				padding: 0 20rpx;
				background: #ff0000;
				color: #FFFFFF;
				font-size: 32rpx;
				-moz-transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				-o-transform:rotate(-45deg);
				-ms-transform:rotate(-45deg);
				transform:rotate(-45deg);
			}
			.concent{
				width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space:nowrap;
			}

			.btn-top {
				width: 150rpx;
				border: solid 1px #0497ff;
				padding: 6rpx;
				border-radius: 6rpx;
				background: #e2e2e2;
				color: #0497ff;
				font-size: 30rpx;
				text-align: center;
			}
		}

		.project {
			display: flex;
			padding: 16rpx;
			margin-bottom: 10rpx;
			border-bottom:solid 1px #C0C0C0 ;
			.via {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 999rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 999rpx;
				}
			}

			.message {
				display: flex;
				flex-direction: column;

				.personage-message {
					display: flex;

					.name {
						font-size: 30rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.btn-message {
						display: flex;
						color: #ff3e3e;
						font-size: 16rpx;
						align-items: center;
						background: #dcdcdc;
						justify-content: center;
						border-radius: 99rpx;
						padding: 4rpx 20rpx;
						height: 50rpx;
						.btn-image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.concent{
					width: 500rpx;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

		}

		.address {
			display: flex;
			justify-content: space-between;
			.address-concent{
				display: flex;
				.address-image {
					width: 80rpx;
					display: flex;
					
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
				.concent{
					width: 200rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap; 
				}
			}
			
			
		}
	}
</style>
